<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>注册界面</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <form action="#" method="post">
        <table align="center">
            <caption><h3>用户注册</h3></caption>
            <tr>
                <td>
                    <fieldset>
                        <legend>身份验证-必填信息</legend>
                        <table>
                            <tr>
                                <td align="right">用户名</td>
                                <td><input type="text" placeholder="请输入用户名" name="username" autofocus /></td>
                            </tr>
                            <tr>
                                <td align="right">密码</td>
                                <td><input type="password" placeholder="请输入密码" name="password" /></td>
                            </tr>
                            <tr>
                                <td align="right">确认密码</td>
                                <td><input type="password" placeholder="请输入密码" name="repassword" /></td>
                            </tr>
                        </table>
                    </fieldset>
                </td>
            </tr>
            <tr>
                <td>
                    <fieldset>
                        <legend>身份信息-选填信息</legend>
                        <table>
                            <tr>
                                <td align="right">所在城市</td>
                                <td>
                                    <!-- multiple -->
                                    <select name="city" >
                                        <option value="shanghai">上海</option>
                                        <option value="beijing">北京</option>
                                        <option value="hangzhou" selected>杭州</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">性别</td>
                                <td>
                                    <input type="radio" name="gender" value="male" />男
                                    <input type="radio" name="gender" value="female"/>女
                                </td>
                            </tr>
                            <tr>
                                <td align="right">头像</td>
                                <td>
                                    <input type="file" name="avatar" multiple />
                                </td>
                            </tr>
                            <tr>
                                <td align="right">爱好</td>
                                <td>
                                    <input type="checkbox" name="hobby" value="ball" />篮球
                                    <input type="checkbox" name="hobby" value="code" checked />编程
                                    <input type="checkbox" name="hobby" value="music"  checked />音乐
                                </td>
                            </tr>
                            <tr>
                                <td align="right">生日</td>
                                <td>
                                    <input type="date" name="birthday" />
                                    <input type="datetime-local" name="birthday" />
                                    <input type="week" name="birthday" />
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </td>
            </tr>
            <tr>
                <td>
                    <fieldset>
                        <legend>其它个人信息</legend>
                        <table>
                            <tr>
                                <td align="right">邮箱</td>
                                <td>
                                    <input type="email" placeholder="请输入邮箱" name="email" value="123@qq.com" readonly />
                                </td>
                            </tr>
                            <tr>
                                <td align="right">博客</td>
                                <td>
                                    <input type="url" name="url" placeholder="请输入博客地址" disabled />
                                </td>
                            </tr>
                            <tr>
                                <td align="right">颜色</td>
                                <td>
                                    <input type="color" name="color" class="" id="" />
                                </td>
                            </tr>
                            <tr>
                                <td align="right">自我评价</td>
                                <td>
                                    <textarea name="evaluate" cols="30" rows="10"></textarea>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="number" value="2" min="0" max="10" step="2" name="score" />
                                </td>
                                <td>
                                    <input type="range" value="2" min="0" max="10" step="2" name="range" />
                                </td>
                                <td>
                                    <input type="search" name="search" />
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </td>
            </tr>
            <tr>
                <td align="center">
                    <input type="submit" value="提交" />
                    <input type="reset" value="重置" />
                </td>
            </tr>
            </tr>
        </table>
    </form>
</body>
</html>